<template>
	<div @click="onJobClick(item.stationID_Main)" class="job-item">
		<p class="bar01">
			<span>{{ item.stationName }}</span>
			<span>{{ item.salaryFormat}}</span>
		</p>
		<p class="bar02">
			<span>{{ item.workAddressValue2 }} | {{ item.streetValue == '' || item.streetValue == null ? '': item.streetValue  + ' | '}} 
				{{ item.edu_LevelValue }} | {{ item.workYearsValue }}</span>
			<!-- <span v-if="item.isJiZhao == true">急招</span> -->
		</p>
		<p class="bar03" v-if="item.welfaresTxtArr != null">
			<span v-for="item_wel in item.welfaresTxtArr.slice(0, 4)" :key="item_wel">{{item_wel}}</span>
			<span v-if="item.welfaresTxtArr.length >= 5">...</span>
		</p>
		<p class="bar04 vip" @click.stop="onCompanyClick(item.companyID)">
			<span class="name">{{ item.companyName }}</span>
			<i class="vip" v-if="item.isRZ == 1">认证</i>
			<span class="time">{{ item.publishDateFormat }}</span>
			<img src="@/assets/img/firm_default_avatar.png" v-if="item.logoUrl === null" />
			<img :src="item.logoUrl" v-else />
		</p>
	</div>
</template>

<script>
import { mixin_person_toJobCompany } from "@/mixin/mixins";

export default {
	name: "JobShowItem",
	components: {},
	props: ["item"],
	mixins: [mixin_person_toJobCompany],
	data () {
		return {};
	},
	// 方法集合
	methods: {},
};
</script>

<style scoped>
.job-item {
	display: flex;
	flex-direction: column;
	padding: 18px 20px 0;
	background-color: #fff;
}

.job-item+.job-item {
	margin-top: 10px;
}

.job-item p {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 0;
	margin-bottom: 10px;
	overflow: hidden;
}

.job-item p.bar01 {
	font-size: 18px;
}

.job-item p.bar01 span:nth-child(1) {
	max-width: 200px;
	font-weight: bold;
	color: #333;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

.job-item p.bar01 span:nth-child(2) {
	color: #f44;
}

.job-item p.bar02 span:nth-child(1) {
	font-size: 13px;
	color: #666;
}

.job-item p.bar02 span:nth-child(2) {
	padding: 0 4px;
	border-radius: 3px;
	background-color: #f66;
	font-size: 11px;
	color: #fff;
}

.job-item p.bar03 {
	justify-content: flex-start;
	padding-bottom: 6px;
}

.job-item p.bar03 span {
	padding: 2px 5px;
	border-radius: 3px;
	margin-right: 6px;
	background-color: rgba(0, 0, 0, 0.04);
	font-size: 12px;
	color: #999;
}

.job-item p.bar04 {
	position: relative;
	padding: 15px 0 15px 28px;
	border-top: 1px solid #f7f7f7;
	margin-bottom: 0;
}

.job-item p.bar04 img {
	position: absolute;
	top: 50%;
	left: 0;
	width: 20px;
	height: 20px;
	border-radius: 3px;
	margin-top: -10px;
}

.job-item p.bar04 i {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 0 0 26px;
  border-radius: 3px;
  margin-left: 5px;
  background-color: #fef3e3;
  font-size: 10px;
  font-style: normal;
  color: #f39b13;
  white-space: nowrap;
}

.job-item p.bar04 span.name {
  font-size: 12px;
  color: #666;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.job-item p.bar04 span.time {
  display: flex;
  justify-content: flex-end;
  flex: 1;
  min-width: 80px;
  font-size: 12px;
  color: #999;
}
</style>
